<template>
  <el-card class="history-card">
    <i class="el-icon-edit ic">History</i>
    <el-input v-model="search" placeholder="Search..." style="margin-bottom: 20px;"></el-input>
    
    <el-table
      :data="filteredHistory"
      style="width: 100%"
      @row-click="openRequestTab"
      >
      <el-table-column label="Date" prop="date"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column align="right">
        <template slot="header">
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { EventBus } from '../event-bus.js'; 
export default {
  name: 'HistoryPanel',
  data() {
    return {
      search: '',  // 用于搜索历史记录
    };
  },
  computed: {
    // 从 Vuex 获取历史记录
    filteredHistory() {
      return this.$store.state.history.history.filter((data) => {
        // 根据搜索框内容筛选
        return !this.search || data.name.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  },
  methods: {
    openRequestTab(row) {
      console.log(row)
      // 触发事件并传递数据
      EventBus.$emit('openRequestTab', row); 
    },
    // 删除历史记录
    handleDelete(index) {
      console.log(index);
      this.$store.dispatch('removeHistory', index);
    },
    // 每当请求成功时，添加历史记录到 Vuex
    /* addHistoryRecord(record) {
      this.$store.dispatch('history/addHistory', record);
    } */
  }
};
</script>

<style scoped>
.history-card {
  width: 100%;  
  height: 100%; 
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  justify-content: flex-start; 
}
.ic {
  margin-left: 15px;
  font-size: 24px; 
  margin-bottom: 16px; 
  color: #008000; 
}
</style>
